<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评教系统</title>
</head>
<link href="../static/plugin/layui/css/layui.css" rel="stylesheet"/>
<script type="text/javascript" src="../static/plugin/layui/layui.js"></script>
<script type="text/javascript" src="../static/js/common.js"></script>
<body>
<!--<div class="demoTable">-->
    <!--<div class="layui-form" action="">-->
        <!--<div class="layui-inline">-->
            <!--<input class="layui-input" name="teacherName" id="teacherName" placeholder="请输入教师名称" autocomplete="off">-->
        <!--</div>-->
        <!--<button class="layui-btn" data-type="reload">搜索</button>-->
    <!--</div>-->
<!--</div>-->
<table class="layui-hide" id="test" lay-filter="table"></table>
</body>

<script>
    layui.use(['form', 'layer', 'table'], function () {
        var table = layui.table
            , form = layui.form, $ = layui.$;

        table.render({
            elem: '#test'  //绑定table id
            , url: 'pj/listLayui'  //数据请求路径
            , cellMinWidth: 80
            , cols: [[
                {type: 'numbers'}
                , {field: 'id', title: 'ID'}
                , {field: 'teacherName', title: '教师名称'}
                , {field: 'studentName', title: '学生名称'}
                , {field: 'zongfen', title: '总分'}
                , {field: 'shijian', title: '时间'}
            ]]
            , page: true   //开启分页
            , limit: 10   //默认十条数据一页
            , limits: [10, 20, 30, 50]  //数据分页条
            , id: 'testReload'
        });

        active = {
            reload: function () {
                var courseName = $.trim($('#courseName').val());
                table.reload('testReload', {
                    where: {
                        courseName: courseName
                    }
                });
            }
        };
        <!-- 查询框中查询按钮click事件 最终调用的是上面的那个active方法-->
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
</html>